﻿@using ERP.RBAC.Dto
@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@model List<MenuDto>
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Three ERP系统</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <style>
        /* 全局科技风格 */
        body {
            background-color: #0a1929;
            color: #e6f7ff;
            font-family: "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }

        /* 背景网格效果 */
        .tech-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(8, 26, 45, 0.6) 1px, transparent 1px),
                linear-gradient(90deg, rgba(8, 26, 45, 0.6) 1px, transparent 1px);
            background-size: 30px 30px;
            background-position: center center;
            z-index: -2;
            pointer-events: none;
        }

        /* 背景发光效果 */
        .glow-effect {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }
        
        .glow-effect::before,
        .glow-effect::after {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            opacity: 0.2;
            filter: blur(100px);
        }
        
        .glow-effect::before {
            background: radial-gradient(circle, #0288D1, transparent 60%);
            top: 10%;
            right: 20%;
        }
        
        .glow-effect::after {
            background: radial-gradient(circle, #01579B, transparent 60%);
            bottom: 20%;
            left: 10%;
        }

        /* 主布局样式 */
        .layui-layout-admin .layui-header {
            background-color: rgba(15, 35, 60, 0.9);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            border-bottom: 1px solid rgba(102, 204, 255, 0.2);
            height: 60px;
        }

        .layui-layout-admin .layui-side {
            background-color: rgba(10, 25, 41, 0.9);
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
            border-right: 1px solid rgba(102, 204, 255, 0.2);
            width: 220px;
        }

        .layui-layout-admin .layui-body {
            background-color: #0a1929;
            left: 220px;
        }

        .layui-layout-admin .layui-footer {
            background-color: rgba(15, 35, 60, 0.9);
            color: #81D4FA;
            text-align: center;
            border-top: 1px solid rgba(102, 204, 255, 0.2);
            height: 44px;
            line-height: 44px;
            left: 220px;
        }

        /* Logo样式 */
        .layui-logo {
            color: #00B0FF;
            font-size: 20px;
            font-weight: 600;
            text-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
            letter-spacing: 1px;
            height: 60px;
            line-height: 60px;
            background: linear-gradient(90deg, rgba(15, 40, 70, 0.8), rgba(10, 25, 41, 0.8));
            border-bottom: 1px solid rgba(102, 204, 255, 0.3);
            width: 220px;
        }

        /* 顶部导航样式 */
        .layui-layout-admin .layui-header .layui-nav {
            background-color: transparent;
        }

        .layui-layout-admin .layui-header .layui-nav .layui-nav-item > a {
            color: #B3E5FC;
            height: 60px;
            line-height: 60px;
            transition: all 0.3s;
        }

        .layui-layout-admin .layui-header .layui-nav .layui-nav-item > a:hover {
            color: #E1F5FE;
            background-color: rgba(33, 150, 243, 0.1);
        }

        .layui-layout-admin .layui-header .layui-nav .layui-this:after, 
        .layui-nav-bar {
            background-color: #00B0FF;
            height: 2px;
        }

        .layui-nav .layui-nav-child {
            background-color: rgba(15, 35, 60, 0.95);
            border: 1px solid rgba(102, 204, 255, 0.3);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .layui-nav .layui-nav-child a {
            color: #B3E5FC;
        }

        .layui-nav .layui-nav-child a:hover {
            background-color: rgba(33, 150, 243, 0.1);
        }

        /* 左侧菜单样式 */
        .layui-side-menu .layui-nav {
            background-color: transparent;
            margin-top: 15px;
        }

        .layui-side-menu .layui-nav .layui-nav-item a {
            height: 40px;
            line-height: 40px;
            padding-left: 45px;
            padding-right: 30px;
            color: #B3E5FC;
            transition: all 0.3s;
            border-radius: 0 20px 20px 0;
            margin: 4px 0;
        }

        .layui-side-menu .layui-nav .layui-nav-item a:hover {
            color: #E1F5FE;
            background-color: rgba(33, 150, 243, 0.1);
        }

        .layui-side-menu .layui-nav .layui-nav-item .layui-icon {
            position: absolute;
            top: 50%;
            left: 20px;
            margin-top: -19px;
            color: #4FC3F7;
        }

        .layui-side-menu .layui-nav .layui-nav-child .layui-nav-child {
            background-color: rgba(8, 24, 40, 0.6);
        }

        .layui-side-menu .layui-nav .layui-nav-child dd.layui-this, 
        .layui-side-menu .layui-nav .layui-nav-child dd.layui-this a, 
        .layui-side-menu .layui-nav .layui-this, 
        .layui-side-menu .layui-nav .layui-this > a {
            background-color: rgba(0, 176, 255, 0.2);
            color: #E1F5FE;
        }

        .layui-side-menu .layui-nav .layui-nav-item.layui-this > a {
            background: linear-gradient(90deg, rgba(0, 176, 255, 0.2), transparent);
        }

        .layui-side-menu .layui-nav .layui-nav-itemed > a {
            color: #E1F5FE !important;
        }

        .layui-side-menu .layui-nav .layui-nav-itemed > .layui-nav-child {
            background-color: rgba(8, 24, 40, 0.6) !important;
        }

        .layui-side-menu .layui-nav .layui-nav-child dd.layui-this:after {
            display: none;
        }

        /* 选项卡样式 */
        .layui-tab {
            margin: 0;
            background-color: transparent;
        }

        .layui-tab-title {
            background-color: rgba(15, 35, 60, 0.8);
            border-bottom: 1px solid rgba(102, 204, 255, 0.2);
            height: 50px;
        }

        .layui-tab-title li {
            color: #B3E5FC;
            height: 50px;
            line-height: 50px;
            min-width: 80px;
            border-right: 1px solid rgba(102, 204, 255, 0.1);
            transition: all 0.3s;
        }

        .layui-tab-title .layui-this {
            color: #E1F5FE;
            background-color: rgba(33, 150, 243, 0.1);
        }

        .layui-tab-title .layui-this:after {
            border-bottom: 2px solid #00B0FF;
        }

        .layui-tab-content {
            padding: 0;
            height: calc(100vh - 154px);
            background-color: transparent;
        }

        .layui-tab-item {
            height: 100%;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
            min-height: 800px;
            background-color: transparent;
        }

        .layui-body {
            overflow: hidden;
            background-color: transparent;
            padding: 0;
        }

        .layui-body > div {
            padding: 0;
        }

        /* 霓虹效果 */
        .neon-item {
            position: relative;
            overflow: hidden;
        }
        
        .neon-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00B0FF, transparent);
            animation: neon-flow 3s linear infinite;
        }
        
        @@keyframes neon-flow {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(15, 35, 60, 0.5);
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(0, 176, 255, 0.5);
            border-radius: 3px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 176, 255, 0.8);
        }
    </style>
</head>
<body class="layui-layout-body">
    <!-- 科技背景 -->
    <div class="tech-bg"></div>
    <div class="glow-effect"></div>
    
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo neon-item">ERP智能管理系统</div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-username"></i>
                        <span id="userName">管理员</span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">个人信息</a></dd>
                        <dd><a href="javascript:;">修改密码</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="/Home/Login">退出</a></li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll layui-side-menu">
                <!-- 左侧导航区域 -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test" lay-accordion="true">
                    @foreach (var menu in Model)
                    {
                        <li class="layui-nav-item">
                            <a href="@(string.IsNullOrEmpty(menu.Url) ? "javascript:;" : menu.Url)" 
                               data-url="@menu.Url" 
                               data-id="menu_@(menu.Id)" 
                               data-title="@menu.Name">
                                @if (!string.IsNullOrEmpty(menu.Icon))
                                {
                                    <i class="layui-icon @menu.Icon"></i>
                                }
                                <span>@menu.Name</span>
                            </a>
                            @if (menu.Children != null && menu.Children.Count > 0)
                            {
                                <dl class="layui-nav-child">
                                    @foreach (var subMenu in menu.Children)
                                    {
                                        if (subMenu.Children != null && subMenu.Children.Count > 0)
                                        {
                                            <dd>
                                                <a href="@(string.IsNullOrEmpty(subMenu.Url) ? "javascript:;" : subMenu.Url)"
                                                   data-url="@subMenu.Url" 
                                                   data-id="menu_@(subMenu.Id)" 
                                                   data-title="@subMenu.Name">
                                                    @if (!string.IsNullOrEmpty(subMenu.Icon))
                                                    {
                                                        <i class="layui-icon @subMenu.Icon"></i>
                                                    }
                                                    <span>@subMenu.Name</span>
                                                </a>
                                                <dl class="layui-nav-child">
                                                    @foreach (var childMenu in subMenu.Children)
                                                    {
                                                        <dd>
                                                            <a href="@(string.IsNullOrEmpty(childMenu.Url) ? "javascript:;" : childMenu.Url)"
                                                               data-url="@childMenu.Url" 
                                                               data-id="menu_@(childMenu.Id)" 
                                                               data-title="@childMenu.Name">
                                                                @if (!string.IsNullOrEmpty(childMenu.Icon))
                                                                {
                                                                    <i class="layui-icon @childMenu.Icon"></i>
                                                                }
                                                                <span>@childMenu.Name</span>
                                                            </a>
                                                        </dd>
                                                    }
                                                </dl>
                                            </dd>
                                        }
                                        else
                                        {
                                            <dd>
                                                <a href="@(string.IsNullOrEmpty(subMenu.Url) ? "javascript:;" : subMenu.Url)"
                                                   data-url="@subMenu.Url" 
                                                   data-id="menu_@(subMenu.Id)" 
                                                   data-title="@subMenu.Name">
                                                    @if (!string.IsNullOrEmpty(subMenu.Icon))
                                                    {
                                                        <i class="layui-icon @subMenu.Icon"></i>
                                                    }
                                                    <span>@subMenu.Name</span>
                                                </a>
                                            </dd>
                                        }
                                    }
                                </dl>
                            }
                        </li>
                    }
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div>
                <!-- 添加选项卡容器 -->
                <div class="layui-tab" lay-filter="mainTabs" lay-allowclose="true">
                    <ul class="layui-tab-title">
                        <li class="layui-this neon-item" lay-id="welcome">首页</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <iframe src="/Home/Welcome" frameborder="0"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © Three.BookStore - 企业资源智能管理平台
        </div>
    </div>
    <script src="~/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        layui.use(['element', 'layer'], function() {
            var element = layui.element;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 统一的菜单点击事件处理
            $('.layui-nav a[data-url]').on('click', function(e) {
                e.preventDefault();
                
                var $this = $(this);
                var url = $this.data('url');
                var id = $this.data('id');
                var title = $this.data('title');
                
                // 如果没有URL，不处理
                if (!url || url === 'javascript:;') {
                    return;
                }
                
                // 确保URL是绝对路径
                if (!url.startsWith('/')) {
                    url = '/' + url;
                }
                
                // 显示加载状态
                var loadIndex = layer.load(2, {content: '正在加载页面...'});
                
                // 检查标签是否已存在
                if($('.layui-tab-title li[lay-id="' + id + '"]').length > 0) {
                    // 存在则切换到该标签
                    element.tabChange('mainTabs', id);
                    // 检查iframe是否需要刷新
                    var iframe = $('.layui-tab-content .layui-tab-item iframe[data-id="' + id + '"]');
                    if(iframe.length > 0) {
                        // 添加加载完成监听
                        iframe.off('load').on('load', function() {
                            layer.close(loadIndex);
                        });
                        iframe.attr('src', url);
                    } else {
                        layer.close(loadIndex);
                    }
                } else {
                    // 不存在则添加新标签
                    var iframeHtml = '<iframe src="' + url + '" frameborder="0" data-id="' + id + '" style="width:100%;height:100%;border:none;"></iframe>';
                    
                    element.tabAdd('mainTabs', {
                        title: title,
                        content: iframeHtml,
                        id: id
                    });
                    
                    // 给新标签添加霓虹效果类
                    $('.layui-tab-title li[lay-id="' + id + '"]').addClass('neon-item');
                    
                    // 切换到新标签
                    element.tabChange('mainTabs', id);
                    
                    // 添加iframe加载完成监听
                    setTimeout(function() {
                        var newIframe = $('.layui-tab-content .layui-tab-item iframe[data-id="' + id + '"]');
                        if (newIframe.length > 0) {
                            newIframe.off('load').on('load', function() {
                                layer.close(loadIndex);
                            });
                            
                            // 设置超时保护
                            setTimeout(function() {
                                layer.close(loadIndex);
                            }, 10000); // 10秒超时
                        } else {
                            layer.close(loadIndex);
                        }
                    }, 100);
                }
            });

            // 初始化UI
            element.init();

            // 获取并显示当前登录用户信息
            try {
                console.log('====== 开始获取用户信息（诊断模式）======');
                var userInfoStr = localStorage.getItem('userInfo');
                console.log('从localStorage获取的原始数据:', userInfoStr);

                if (!userInfoStr) {
                    console.log('未找到用户信息，可能未登录');
                    $('#userName').text('未登录');
                    return;
                }

                var userInfo = JSON.parse(userInfoStr);
                console.log('解析后的用户信息:', userInfo);

                // 显示用户信息
                if (userInfo) {
                    // 获取用户名/昵称
                    var displayName = '';
                    if (userInfo.userNickname) {
                        displayName = userInfo.userNickname;
                        console.log('使用昵称显示:', displayName);
                    } else if (userInfo.userName) {
                        displayName = userInfo.userName;
                        console.log('使用用户名显示:', displayName);
                    } else {
                        displayName = '未知用户';
                        console.log('未找到用户名/昵称，使用默认值');
                    }

                    // 获取角色名称
                    var roleDisplay = '';
                    if (userInfo.roleName) {
                        roleDisplay = '(' + userInfo.roleName + ')';
                        console.log('显示角色名称:', userInfo.roleName);
                    } else {
                        console.log('未找到角色信息，不显示角色');
                    }

                    // 组合显示：姓名(角色)
                    $('#userName').text(displayName + roleDisplay);
                    console.log('最终显示文本:', displayName + roleDisplay);

                    // 根据角色控制界面元素（可选）
                    if (userInfo.roleName === '超级管理员') {
                        console.log('当前用户是超级管理员');
                        // 这里可以添加针对超级管理员的UI逻辑
                    } else if (userInfo.roleName === '管理员') {
                        console.log('当前用户是管理员');
                        // 这里可以添加针对管理员的UI逻辑
                    } else if (userInfo.roleName === '普通用户') {
                        console.log('当前用户是普通用户');
                        // 这里可以添加针对普通用户的UI逻辑
                    } else {
                        console.log('未知角色或无角色');
                    }
                } else {
                    console.log('用户信息格式不正确');
                    $('#userName').text('用户信息错误');
                }
                console.log('====== 用户信息获取完成 ======');
            } catch (error) {
                console.error('显示用户信息时出错:', error);
                $('#userName').text('未知用户');
            }
            
            // 监听退出登录点击事件
            $('dd a:contains("退出登录")').on('click', function() {
                layer.confirm('确定要退出登录吗？', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    // 清除本地存储的用户信息
                    localStorage.removeItem('userInfo');
                    // 关闭确认框
                    layer.close(index);
                    // 跳转到登录页
                    window.location.href = '/Home/Login';
                });
            });
        });
    </script>
</body>
</html>
